<template>
    <div style="height: 920px">
        <div class="title" style="">
            <p style="color: red;float: left;margin-left: 40px;font-size: 15px">全部帖子</p>
            <el-button class="el-icon-edit" type="success" @click="dialogVisible=true"
                       style="padding: 7px 12px;margin: 0 15px 0 0;float: right;font-size: 10px">我来说两句
            </el-button>
        </div>
        <el-dialog style="text-align: center;margin: auto" title="发表论坛" :visible.sync="dialogVisible">
                            <textarea name="" id="1" cols="60" rows="10" v-model="invitation.content">
                            </textarea><br>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleAddcontentarr()">提交</el-button>
            </div>
        </el-dialog>
        <div class="litHead" style="height: 49px;margin-top: 15px;">
            <span style="font-size: 15px;margin:10px 80px 0 80px">共{{contentAll}}个帖子</span>
            <select name="" id="" style="float: right;margin: 0 50px 0 0;width: 100px;height: 30px">
                <option value="1">按时间排序</option>
            </select>
        </div>
        <div class="i">
            <ol>
                <li style="line-height: 50px;width: 100%;height: 49px;border-bottom: 1px solid #f0f0f0"
                    v-for="i in contentarr">
                              <span style="
                              padding: 0;
                              width: 32px;
                              height: 16px;
                              line-height: 16px;
                              text-align: center;
                              color: #fff;
                              background: #F26552;
                              float: left;
                              margin: 17px 32px 0 30px;">置顶</span>
                    <a href="javascript:void (0)" @click="goTopdetail(i.id,invitation.CircleId)" style="text-overflow: ellipsis">
                        <p style="display: block;font-size: 15px;color: #9e9e9e;margin-top: 0px;text-overflow: ellipsis;width: 430px;height: 50px">
                            {{i.content}}</p>
                        <span style="float: right;margin-right: 40px;color: #9e9e9e">{{i.like}}点赞</span>
                    </a>

                </li>
            </ol>
        </div>
    </div>
</template>

<script>
    export default {
        id:'',
        name: '',
        components: {},
        props: {},
        data() {
            return {
                invitation: {
                    userId: 1,
                    content: "",
                    CircleId:""
                },
                contentAll: 0,
                dialogVisible: false,
                contentarr: [],
                buttonvalue: {
                    enable:0,
                    disabledT: this.enable==1,//是否禁用
                    value: "+加入",
                },
            }
        },
        computed: {},
        watch: {},
        methods: {
            goTopdetail(id,circleId){
                this.$router.push({
                    "path":"/top/invitationdetail",
                    "query":{
                        "id":id,
                        "circleId":circleId
                    }
                })
            },
            handleAddcontentarr(){
                let url = "http://localhost:9080/invitations/insert"
                let formData = this.qs.stringify(this.invitation);
                console.log(formData)
                this.axios.post(url,formData).then((response) => {
                    console.log('服务器端响应的结果：' + response);
                    if (response.data.state == 20000) {
                        console.log('添加成功');
                        this.$message({
                            message: '添加成功！',
                            type: 'success'
                        });
                        this.invitation.content=""
                        this.dialogVisible = false
                        this.loadContentarr(this.invitation.CircleId)
                    }
                })

            },
            loadContentarr(id) {
                let url = "http://localhost:9080/invitations/" + id + "/InvitationList"
                this.axios.get(url).then((response) => {
                    let responseBody = response.data
                    console.log(response.data)
                    this.contentarr = responseBody.data;
                    this.contentAll = responseBody.data.length
                })
                console.log(this.contentAll)
            },
        },
        created() {
        },
        mounted() {
            this.id = this.$route.query.id
            this.loadContentarr(this.id);
            this.invitation.CircleId = this.id;
        },
    }

</script>

<style scoped>

    a {
        text-decoration: none;
        outline: none;
        font-family: "Microsoft Yahei", arial, sans-serif;
        color: #9e9e9e;
    }

    p {
        float: left;
        max-width: 430px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 14px;
    }

    .title {
        width: 100%;
        height: 92px;
        border-bottom: 1px solid #f0f0f0;
        padding: 34px 40px 0 40px;
        box-sizing: border-box
    }
    .litHead {
        border-bottom: 1px solid #f0f0f0;
    }

    .left > span {
        position: absolute;
    }
</style>

